<template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="alt：" prop="alt">
        <el-input v-model="ruleForm.alt" />
      </el-form-item>
      <el-form-item label="link：" prop="link">
        <el-input v-model="ruleForm.link" />
      </el-form-item>
      <el-form-item label="上传图片：" prop="link">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="httpRequest"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >创建</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import { Plus } from "@element-plus/icons-vue";
  import { createBanner } from "@/api/api";
  export default {
    data() {
      return {
        ruleForm: {
          alt: "",
          link: "",
          img: "",
        },
        rules: {
          alt: [{ required: true, message: "请输入描述", trigger: "blur" }],
          link: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
        },
        imageUrl: "",
      };
    },
    methods: {
      httpRequest(res) {
        // 图片回显
        this.imageUrl = URL.createObjectURL(res.file);
        // 把图片处理成base64格式上传
        this.getBase64(res.file).then((res) => {
          this.ruleForm.img = res;
        });
      },
      getBase64(file) {
        return new Promise((resolve, reject) => {
          let reder = new FileReader();
          let fileResult = "";
          reder.readAsDataURL(file);
  
          // 处理开始
          reder.onload = () => {
            fileResult = reder.result;
          };
          reder.onerror = (error) => {
            reject(error);
          };
          reder.onloadend = () => {
            resolve(fileResult);
          };
        });
      },
      submitForm() {
        this.$refs.ruleFormRef.validate(async (valid) => {
          if (valid) {
            const params = {
              img: this.ruleForm.img,
              alt: this.ruleForm.alt,
              link: this.ruleForm.link,
            };
            await createBanner(params);
            this.resetForm();
          } else {
            this.$message.error("创建失败");
          }
        });
      },
      resetForm() {
        this.imageUrl = "";
        this.$refs.ruleFormRef.resetFields();
      },
    },
    components: {
      Plus,
    },
  };
  </script>
  
  <style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
  
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>
  